<template>
    <!-- 现在我们要展示图片详情 -->
    <q-page class="">
        <div class="row items-stretch content-around">
            <div class="col-12 col-md-6 q-pa-md ">
                <q-carousel
                animated
                v-model="slide"
                autoplay
                arrows
                navigation
                infinite
                control-type="regular"
                control-color="blue"
                >
                    <template v-for="(pic, idx) in info.certpic_set" :key="idx">
                        <q-carousel-slide :name="idx+1">
                            <q-img :src="imgBase + pic" />
                        </q-carousel-slide>
                    </template>
                </q-carousel>
            </div>
            <div class="row col-12 col-md-6 q-pa-md ">
                <div class="col-12">
                    <q-chip color="primary" text-color="white" class="">
                        赛事名称
                    </q-chip>
                    <div class="text-body1">
                        {{info.cate_name}}{{!!info.cate && info.cate.collect_part === 'name'?'-'+info.name:''}}
                    </div>
                </div>
                <!-- <q-separator/> -->
                <div class="col-12" v-if="info.cate.collect_part === 'level'">
                    <q-chip color="primary" text-color="white" class="q-mt-md">
                        获奖级别
                    </q-chip>
                    <div class="text-body1">{{info.level}}</div>
                </div>
                <div class="col-12" v-if="info.cate.collect_part === 'score'">
                    <q-chip color="primary" text-color="white" class="q-mt-md">
                        竞赛成绩
                    </q-chip>
                    <div class="text-body1">{{info.score}}</div>
                </div>
                <div class="col-12">
                    <q-chip color="primary" text-color="white" class="q-mt-md">
                        获奖时间
                    </q-chip>
                    <div class="text-body1">{{new Date(info.achieved_date).toLocaleDateString("zh-cn")}}</div>
                </div>
                <!-- <q-separator/> -->
                <div class="col-12">
                    <q-chip color="primary" text-color="white" class="q-mt-md">
                        指导教师
                    </q-chip>
                    <q-virtual-scroll
                        :items="teachers"
                        virtual-scroll-horizontal
                    >
                        <template v-slot="{ item, index }">
                            <div :key="index">
                                <q-chip size="18px">
                                    <y-auto-head-icon :imgBase="imgBase" :user="item"/>
                                    {{item.name}}
                                </q-chip>
                            </div>
                        </template>
                    </q-virtual-scroll>
                </div>
                <!-- <q-separator/> -->
                <div class="col-12">
                    <q-chip color="primary" text-color="white" class="q-mt-md">
                        参赛选手
                    </q-chip>
                    <q-virtual-scroll
                        :items="owners"
                        virtual-scroll-horizontal
                    >
                        <template v-slot="{ item, index }">
                            <div :key="index">
                                <q-chip size="18px">
                                    <y-auto-head-icon :imgBase="imgBase" :user="item"/>
                                    {{item.name}}
                                </q-chip>
                            </div>
                        </template>
                    </q-virtual-scroll>
                </div>
                <!-- <q-separator/> -->
            </div>
        </div>
        <div class="col-12 q-pl-md items-stretch">
            <q-chip color="primary" text-color="white">
                说明
            </q-chip>
            <div class="text-body2 q-ma-md">
                <!-- 现在要处理 -->
                <div v-if="isPersonal">该竞赛为个人项目</div>
                <div v-else>该竞赛为团队项目</div>

                <div>成员参与度情况：</div>
                <template v-for="(s, idx) in owners" :key="idx">
                    <div>{{s.name}}:{{s.play_role_imp}}%</div>
                </template>

                <div>竞赛审核细节：</div>
                <div>
                    <div v-for="(join, idx) in info.join_list" :key="idx">
                      <div v-if="join.status === 'acc'">
                        {{join.name}}同意时间：{{join.date}}
                      </div>
                      <div v-else-if="join.status === 'unn'">
                        {{join.name}}未同意，发起请求时间：{{join.date}}
                      </div>
                      <div v-else-if="join.status === 'rej'">
                        {{join.name}}已拒绝，操作时间：{{join.date}}
                      </div>
                    </div>
                </div>
            </div>
        </div>
      <q-page-sticky position="bottom-right" :offset="[18, 90]" v-if="needMeAccept">
          <q-btn fab icon="check" color="green" @click="acceptRequest" />
      </q-page-sticky>
    </q-page>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { Notify } from 'quasar'
import { mapGetters } from 'vuex'
import yAutoHeadIcon from 'src/components/y-auto-head-icon.vue'

export default defineComponent({
  components: { yAutoHeadIcon },
  data () {
    return {
      slide: ref(1),
      info: {
        all_accept: true,
        cate: {},
        join_list: []
      },
      needMeAccept: false
    }
  },
  async mounted () {
    await this.fetchData()
    const info = this.info
    if (this.isLogined && info.pk) {
      // 这个要看情况了 最简单的办法是看看在不在我需要审批的列表里面 因为这个东西已开就获得到了 但是要注意没有登录的情况
      const ret = this.getMeAccept.map(o => o.pk).indexOf(info.pk) !== -1
      this.needMeAccept = ret
    } else {
      this.needMeAccept = false
    }
  },
  computed: {
    ...mapGetters('comp', [
      'getMeAccept'
    ]),
    ...mapGetters('session', [
      'isLogined',
      'getUser'
    ]),
    teachers () {
      return this.info.join_list ? this.info.join_list.filter(o => o.restrict_type === 'advisor') : []
    },
    owners () {
      return this.info.join_list ? this.info.join_list.filter(o => o.restrict_type === 'joiner') : []
    },
    isPersonal () {
      const joinList = this.info.join_list
      let cnt = 0
      for (let i = 0; i < joinList.length; i += 1) {
        if (joinList[i].restrict_type === 'joiner') {
          cnt += 1
        }
      }
      return cnt === 1
    }
  },
  methods: {
    async fetchData () {
      await this.$store.dispatch('comp/getInfo', this.$route.params.id)
        .then(info => {
          this.info = info
          console.log('info', info)
        })
        .catch(error => {
          this.$router.replace('/error')
          Notify.create('错误！无法获取详情。原因：' + error + '：' + error.response.data.detail)
        })
    },
    acceptRequest () {
      this.$q.dialog({
        title: '项目信息确认',
        message: '请选择您的操作：',
        options: {
          type: 'radio',
          model: 'opt1',
          // inline: true
          items: [
            { label: '审核通过', value: 'accept', color: 'secondary' },
            { label: '审核不通过', value: 'reject', color: 'negative' }
          ]
        },
        cancel: false,
        persistent: true
      }).onOk(data => {
        let msg = ''
        if (data === 'reject') {
          msg = 'unimplemented'
        }
        this.$store.dispatch('comp/handleRequest', {
          id: this.info.pk,
          approve: data === 'accept',
          msg: msg
        })
          .then(() => {
            this.$router.back()
          })
          .catch(error => {
            Notify.create('无法执行操作，请联系管理员，原因：' + error.response.data.detail)
          })
      }).onCancel(() => {
        // console.log('>>>> Cancel')
      }).onDismiss(() => {
        // console.log('I am triggered on both OK and Cancel')
      })
    }
  }
})
</script>
